<template>
  <view class="container">
 <view class="header">
    <view class="profile">
      <view class="avatar"></view>
      <text class="name">张三</text>
    </view>
    <view class="share"></view>
  </view>
    <view class="order-status">
      <view class="status-item" @click="navigateToPendingPayment('待支付')">
        <text class="status-icon">🔙</text>
        <text class="status-text">待支付</text>
      </view>
      <view class="status-item" @click="navigateToPendingPayment('待配送')">
        <text class="status-icon">🚚</text>
        <text class="status-text">待配送</text>
      </view>
      <view class="status-item">
        <text class="status-icon" @click="navigateToPendingPayment('待收货')">📦</text>
        <text class="status-text">待收货</text>
      </view>
    </view>
	<view class="order-status">
	 <view class="address-item" @click="navigateToAddressManagement()">
	   <text class="address-icon">📍</text>
	   <text class="address-text" >地址管理</text>
	 </view>
	 <view class="address-item" @click="navigateTooperationLogs()">
	   <text class="address-icon">📋</text>
	   <text class="address-text">订单日志</text>
	 </view>
	  <view class="status-item">
	    <text class="status-icon">⚙️</text>
	    <text class="status-text" @click="handlePaymentCode('/pages/PaymentCode/PaymentCode')">收付款设置</text>
	  </view>
	</view>
  </view>
</template>
<script>
export default {
  methods: {
    navigateToAddressManagement() {
      uni.navigateTo({
        url: '/pages/myPage/address/address'
      });
    },
	handlePaymentCode(path){
		uni.navigateTo({
			url:path
		})
	},
	navigateTooperationLogs(){
		uni.navigateTo({
		  url: '/pages/operationLogs/operationLogs'
		});
	},
	navigateToPendingPayment(targetTab) {
	  uni.navigateTo	({
	     url: `/pages/order/orders?targetTab=${encodeURIComponent(targetTab)}`
	  });
	}
  }
}
</script>
<style>
	uni-page-wrapper {
	  background-color: #f5f5f5;
	}
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 水平分布 */
  padding: 20px;
  background-color: #007aff;
  height: 100px;
  color: white;
  border-radius: 0 0 70px 70px; /* 半圆形底部 */
  position: relative; /* 添加相对定位 */
}

.profile {
  display: flex;
  align-items: center; /* 垂直居中 */
}

.avatar {
  width: 60px; /* 增大头像大小 */
  height: 60px;
  border-radius: 50%; /* 圆形头像 */
  background-color: white;
  margin-right: 10px; /* 添加右边距 */
}

.name {
  font-size: 20px; /* 增大字体大小 */
  font-weight: bold; /* 加粗字体 */
}

.share {
  width: 40px; /* 增大分享按钮大小 */
  height: 40px;
  background-color: white;
  background-color: #007aff;
  border-radius: 50%; /* 圆形分享按钮 */
  margin-right: 20px; /* 添加右边距 */
}

.order-status {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  background-color: white;
  margin-top: 15px;
  border-radius: 15px;
}

.status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.status-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.status-text {
  font-size: 16px;
}

.address-management {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  background-color: white;
  margin-top: 10px;
}

.address-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.address-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.address-text {
  font-size: 16px;
}

.footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
  background-color: #f5f5f5;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.nav {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
}

.nav-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.nav-text {
  font-size: 14px;
}

.nav-item.active {
  color: #007aff;
}
</style>
